<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="dataList"
      element-loading-text="Loading"
    >
      <el-table-column prop="user.name" align="center" label="姓名" width="180">
      </el-table-column>
      <el-table-column
        prop="user.nickname"
        align="center"
        label="微信名"
        width="180"
      >
      </el-table-column>
      <el-table-column prop="createDate" align="center" label="时间">
      </el-table-column>
      <el-table-column
        prop="content"
        align="center"
        show-overflow-tooltip
        label="内容"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleDel(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :limit.sync="queryForm.pageSize"
      :page.sync="queryForm.currPage"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getTalkApi, delTalkApi } from "@/api/talk";
import pagination from "@/components/Pagination/index";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      dataList: [],
      total: 0,
      loading: false,
      queryForm: {
        currPage: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getTalkApi(this.queryForm)
        .then((res) => {
          console.log("获取成功", res);
          const { total, records } = res.data;
          this.total = total;
          this.dataList = records;
          this.loading = false;
        })
        .catch((err) => {
          console.log("获取失败", err);
          this.loading = false;
        });
    },
    handleDel(row) {
      this.$confirm("此操作将删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delTalkApi(row.id)
          .then((res) => {
            this.$message.success("删除成功");
            this.getList();
          })
          .catch((err) => {});
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
